<!-- 下拉选择部门组件 -->
<template>
  <el-select
    v-model="chanValue"
    :multiple="props.multiple"
    :filterable="props.filterable"
    :allow-create="props.allowCreate"
    :placeholder="placeholder"
    size="small"
  >
    <el-option
      v-for="item in optionData"
      :key="item.id"
      :label="item.name"
      :value="item.code"
    >
    </el-option>
  </el-select>
</template>
<script lang="ts">
export default {
  name: "department-select"
};
</script>
<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { getDepartments } from "/@/api/basic/department";
const props = defineProps({
  blockName: {
    type: String,
    default: ""
  },
  value: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String,
    default: "请选择"
  },
  // 一下三个属性配合多选使用
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: true
  },
  allowCreate: {
    type: Boolean,
    default: false
  }
});
const chanValue = computed({
  get: () => props.value,
  set: val => {
    emits("update:value", val);
    var name = optionData.value.filter(item => item.code == val)[0].name;
    emits("changeDepartment", name);
  }
});
const emits = defineEmits(["update:value", "changeDepartment"]);
// 获取所有部门-u9
const optionData = ref<any>([]);
const getAllData = () => {
  getDepartments().then((res: any) => {
    if (res.code === 0) {
      optionData.value = res.data;
    }
  });
};
onMounted(() => {
  getAllData();
});
</script>
